<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <div class="headerform">
      <el-form
        :data="List"
        label-width="100px"
        inline
      >
        <el-form-item label="司机账号:">
          <el-input
            v-model="getpageform.account"
            placeholder="请输入司机账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="司机姓名:">
          <el-input
            v-model="getpageform.name"
            placeholder="请输入司机姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="司机手机号:">
          <el-input
            v-model="getpageform.phone"
            placeholder="请输入司机手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属机构:">
          <el-cascader
            v-model="value"
            :check-strictly="true"
            :options="options"
            :props="defaultProps"
            @change="getCheckedNodes"
          ></el-cascader>
        </el-form-item>
        <span class="flexleft">
          <el-button
            type="danger"
            style="width: 80px"
            @click="btnsoso"
          >搜索</el-button>
          <el-button
            plain
            @click="userrender"
          >重置</el-button>
        </span>
      </el-form>
    </div>
    <div class="maintable">
      <el-table
        border
        style="width: 100%"
        :data="List"
      >
        <el-table-column
          label="序号"
          width="100px"
          type="index"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column
          label="司机账号"

          prop="account"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="司机姓名"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="司机手机号"
        >
        </el-table-column>
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
        >
        </el-table-column>
        <el-table-column
          prop="agency.name"
          label="所属机构"
        >
        </el-table-column>
        <el-table-column
          label="工作状态"
        >
          <template v-slot="{ row }">
            <span v-if="row.workStatus === 1"><span class="workStatus"></span>上班</span>
            <span v-else><span class="workStatu"></span>休息</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              size="small"
              @click="$router.push(`driver-detail/?id=${row.userId}`)"
            >查看</el-button>
            <el-button
              type="text"
              size="small"
              @click="showdirlog(row)"
            >配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="background: #fff; display: inline-block; width:100% ;text-align: center;
    line-height: 50px;"
        :current-page="getpageform.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="getpageform.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="车辆配置"
      :visible="dialogVisible"
      width="30%"
      @close="close"
    >
      <p>配置车辆需要满足以上信息</p>
      <div class="spanis">
        <span>1 司机信息已完善</span>
        <span>2 司机已设置排班</span>
        <span>3 司机绑定车辆未在启用状态</span>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="isdialogVisible"
        >确 定</el-button>
      </span>
    </el-dialog>
    <CaRcofig
      ref="usercart"
      :userinfocart="userinfocart"
      :dialogshow="dialogshow"
      @close="dialogshow = $event"
    />
  </div>
</template>
<script>
import CaRcofig from './components/car-config.vue'
import { driverList } from '@/api/transit'
import { agencyList } from '@/api/institutions'
export default {
  name: 'Courses',
  components: {
    CaRcofig
  },
  data() {
    return {
      List: [], // 司机列表
      options: [], // 机构列表
      defaultProps: {
        label: 'name',
        children: 'children',
        value: 'id'
      },
      getpageform: {
        pageSize: 10,
        page: 1,
        name: '', // 名字
        account: '', // 账号
        agentId: '', // 机构id
        phone: '' // 手机号
      },
      counts: null,
      value: [],
      dialogVisible: false,
      dialogshow: false,
      userinfocart: {
      } // 配置车辆
    }
  },
  async created() {
    // 树性结构
    this.driverList()
    const res = await agencyList()
    this.options = JSON.parse(res.data)
  },
  methods: {
    handleSizeChange(value) {
      this.getpageform.pageSize = value
      this.driverList()
    },
    close() {
      this.dialogVisible = false
    },
    // 配置车辆弹窗
    isdialogVisible() {
      this.dialogshow = true
      this.dialogVisible = false
      this.$refs.usercart.getuserinfocart()
    },
    // 打开小弹窗
    showdirlog(row) {
      this.userinfocart = row
      this.dialogVisible = true
    },
    // 级联选择器获取机构id
    getCheckedNodes(value) {
      // console.log(value[value.length - 1])
      this.getpageform.agentId = value[value.length - 1]
    },
    // 部分搜索
    btnsoso() {
      this.getpageform.page = 1
      this.driverList()
    },
    // 司机列表
    async driverList() {
      const res = await driverList(this.getpageform)
      this.counts = res.data.counts
      if (res.data.items) {
        this.List = res.data.items
      }
    },
    // 页码切换
    handleCurrentChange(val) {
      this.getpageform.page = val
      this.driverList()
    },
    indexMethod(index) {
      return index + 1
    },
    // 重置表单
    userrender() {
      this.getpageform = {
        pageSize: 10,
        page: 1,
        name: '', // 名字
        account: '', // 账号
        agentId: '', // 机构id
        phone: '' // 手机号
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

.spanis {
  span {

    display: inline-block;
    width: 47%;

  }
  :nth-child(3) {
    margin-top: 10px;
  }
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
/deep/ .el-select {
  width: 100%;
}

/deep/ .el-card {
  overflow: initial;
}
.headerform {
  background: #fff;
  margin-top: 10px;
  margin-left: 20px;
  padding-top: 20px;
}
.maintable {
  height: 700px;
  margin-top: 20px;
  margin-left: 20px;
}
.flexleft {
  margin-left: 25px;
}
.workStatus {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: green;
  border-radius: 2px;
  transform: translate(-4px, -2px);
}
.workStatu{
   display: inline-block;
  width: 5px;
  height: 5px;
  background: red;
  border-radius: 2px;
  transform: translate(-4px, -2px);
}
</style>

